<template>
  <div class="icons page-container">
    <h1 class="mini-padding">内置常用字体图标</h1>
    <div class="flex-row mini-padding">
      <div class="iconItem flex-column-center" v-for="(item, index) in iconList" :key="index">
        <MIcon :name="item"></MIcon>
        {{ item }}
      </div>
    </div>

    <h1 class="mini-padding">图标组件</h1>
    <pre style="color: black; font-size: 18px;">
      <span class="bold">组件路径:</span>  src/components/MIcon.vue
      <span class="bold">使用说明</span>
        <span class="bold">1.在当前使用页面引入组件</span> 
        <code class="mini-padding">import MIcon from '@/components/MIcon.vue'</code>
        <span class="bold">2. 在需要使用的图标地方使用  </span> 
        <code class="mini-padding">&lt;MIcon name="xxx" color="xxx" size="xxx" bgColor="xxx" radius="xxx"/&gt;</code>
        <span class="bold">参数说明: </span>
            name(图标名称) -- 必填
            color(图标颜色) -- 可选  默认值: #000000
            size(图标大小) -- 可选  默认值: 2rem
            bgColor(背景颜色) -- 可选  默认值: none
            radius(圆角)  -- 可选  默认值: 0px
        <MIcon name="phone" bg-color="#a15533" color="#fff" radius="1rem" style="margin-left: 60px;"></MIcon>
    </pre>
    <h1 class="mini-padding">自定义扩展图标</h1>
    <pre style="color: black; font-size: 18px;">
      <span class="bold">1. <a href="https://www.iconfont.cn/" target="_blank">打开iconfont官网</a></span>
      <span class="bold">2. 搜索添加喜欢的图标到购物车</span>
      <span class="bold">3. 将购物车的图标添加到自己的项目  </span>
      <span class="bold">4. 生成fontClass  </span>
      <span class="bold">5. 复制代码追加到src/assets/iconfont.css中即可</span>
    </pre>
  </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import MIcon from '@/components/MIcon.vue'

let iconList = reactive([
  'roundrightfill', 'right', 'pullleft', 'bottom', 'home2', 'icon41', 'bottom01', 'dingwei',
  'weizhi', 'change', 'roundleftfill-copy', 'setting', 'date',
  'user', 'exchange', 'dianpu5', 'change1', 'date1', 'date2',
  'pie', 'dragon', 'drag', 'left-circle', 'adduser', 'home1',
  'left', 'align-left', 'pic-right', 'pic-left', 'drag1', 'chart-line',
  'chart-bar', 'user-fill', 'align-left1', 'arrow-to-bottom', 'caret-right', 'caret-left', 'angle-left', 'caret-right1',
  'loading', 'left1', 'right1', 'caidan', 'jump_to_bottom', 'exchange1', 'right2', 
  'toTop', 'RequestQuote', 'loading1', 'user1', 'pie-f', 'Top', 'rightalignment', 
  'chart-bar1', 'home3', 'toggle-right', 'user2', 'util', 'request', 
  'dragon1', 'tubiao', 'xiangxiajiantou', 'home', 'ditu', 'icon', 'guan', 'icon1', 'icon2', 
  'icon3', 'icon5', 'icon4', 'icon6', 'xiayiye', 'check', 'locationfill', 'rectangle390', 
  'icon31', 'huan1', 'zaixiankefu', 'info', 'riyongbaihuo', 'cart', 'add1', 'taobao', 'lock', 
  'youhuiquan', 'phone', 'shumajiadian', 'gift-fill', 'wifi', 'imgerror', 'delete', 'setting', 
  'home-fill', 'dianyu', 'mim', 'shebei', 'setting-filling',

])
</script>

<style scoped lang='scss'>
.iconItem {
  width: 100px;
  height: 80px;
  border: solid 1px black;
}
</style>